<template>
    <KeepAlive>
        <el-container :style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
            <el-header height=".5938rem" :style="{ padding: '0', position: 'sticky', top: 0, zIndex: 1000 }">
                <MYNAV class="my-nav"></MYNAV>
            </el-header>
            <el-main :style="{ padding: '0', flex: 1, background: '#f8f8f8' }" class="main-cont">
                <div>
                    <keep-alive>
                        <router-view></router-view>
                    </keep-alive>
                    <!-- <router-view v-if="!$route.meta.keepAlive"></router-view> -->
                </div>
            </el-main>
            <el-footer :style="{ padding: '0' }" height=".3125rem">
                <FOOt></FOOt>
            </el-footer>
        </el-container>
    </KeepAlive>
</template>

<script setup name="home">
import MYNAV from './my-nav.vue'
import FOOt from './foot.vue'
</script>

<style lang="scss" scoped>
.main-cont {
    height: calc(100% - .9063rem);
}
</style>